<template>
  <div>
    <Row class="search-info-style">
      <DatePicker type="year" v-model="param.year" placeholder="选择年份" @on-open-change="changeYear()" style="width: 200px;margin-right:10px;"></DatePicker>
      <DatePicker type="date" v-model="param.begin_time" placeholder="选择开始时间" style="width: 200px;margin-right:10px;"></DatePicker>
      <DatePicker type="date" v-model="param.end_time" placeholder="选择结束时间" style="width: 200px"></DatePicker>
      <Button class="new-btn-sty" @click="setTime()" style="float:right">
        <Icon type="md-add" />设置星级评定时间
      </Button>
    </Row>
    <Table :columns="columns" :data="questionList" border>
      <template  slot-scope="{row, index}" slot="apply_state">
        <span v-if="row.apply_state == '0'">已推荐</span>
        <span v-if="row.apply_state == '1'">已同意</span>
        <span v-if="row.apply_state == '2'">不同意</span>
      </template>
      <template slot-scope="{row, index}" slot="action">
        <Rate :count="5" disabled v-model="questionList[index].star_level" />
      </template>
      <template slot-scope="{row, index}" slot="action1" >
        <Button type="success" size="small" v-if="row.apply_state == '0'" @click="agree(row, index)" style="margin-right:5px;">审核同意</Button>
        <Button type="error" size="small" v-if="row.apply_state == '0'" @click="disagree(row, index)">审核不同意</Button>
      </template>
    </Table>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page class="page_style" :total="searchInfo.totalnum" :current="searchInfo.currentPageNo"
          :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
    <Drawer title="经验内容" v-model="drawer1" width="720" :styles="styles">
      <Form :model="formData">
        <Row :gutter="32">
            <Col span="24">
                <FormItem label="经验标题" label-position="top">
                    <Input v-model="formData.experience_name" placeholder="请填写经验标题" />
                </FormItem>
            </Col>
        </Row>
        <Row :gutter="32">
            <Col span="24">
              <FormItem label="经验内容" label-position="top">
                <Input type="textarea" v-model="formData.experience_content" :rows="4" placeholder="请填写备注" />
              </FormItem>
            </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="drawer1 = false">取消</Button>
        <Button type="primary" @click="complete()">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import './index.less'
import { date2str, year2str } from '@/api/eventlist'
import { getCommunityFiveStarList, updateApplyY, updateApplyN, insertStarYear, getStarInfo } from '@/api/workerV2'
export default {
  name: 'star_rating',
  data () {
    return {
      star_year: new Date(),
      nowYear: '',
      loadData: false,
      columns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: '60'

        },
        {
          title: '区',
          key: 'qu_company_code',
          align: 'center'
        },
        {
          title: '街道',
          key: 'jiedao_company_code',
          align: 'center'
        },
        {
          title: '社区',
          key: 'company_code',
          align: 'center'
        },
        {
          title: '审核状态',
          slot: 'apply_state',
          align: 'center'
        },
        {
          title: '星级',
          slot: 'action',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action1',
          align: 'center'
        }
      ],
      formData: {},
      drawer1: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      pStyle: {
        fontSize: '16px',
        color: 'rgba(0,0,0,0.85)',
        lineHeight: '24px',
        display: 'block',
        marginBottom: '16px'
      },
      studySecond: 0,
      isTrue: true,
      param: {
        pageNo: 1,
        pageSize: 10
      },
      searchInfo: {
        currentPageNo: 1,
        currentPageSize: 10,
        totalnum: null
      },
      questionList: [], // 培训题列表
      systemList: [] // 系统类型
    }
  },
  components: {},
  computed: {},
  mounted () {
    var myDate = new Date()
    this.nowYear = myDate.getFullYear()
    this.getTime()
    this.init()
  },
  methods: {
    createStarByYearData () { // 开始社区评定录入
      createStarByYear({ year: this.nowYear }).then(res => {
        if (res.data.errcode === 0) {
          this.init()
          return
        }
        this.$$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    init () { // 社区星级列表数据
      getCommunityFiveStarList(this.param).then(res => {
        if (res.data.errcode === 0) {
          this.questionList = res.data.data.results
          this.searchInfo.totalnum = res.data.data.totalRecord
          return
        }
        this.$$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    searchData () { // 搜索
      // this.searchInfo.pageNo = 1
      this.searchInfo.currentPageNo = 1
      this.param.pageNo = 1
      this.init()
    },
    changePageNo (pageNo) {
      this.param.pageNo = pageNo
      this.init()
    },
    size (pageSize) {
      this.searchInfo.currentPageSize = pageSize
      this.param.pageSize = pageSize
      this.changePageNo(1)
    },
    agree (row, index) { // 星级评定
      if (confirm('确定将该社区评定为5星吗？')) {
        updateApplyY({ id: row.id }).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({
              title: '成功提示',
              desc: '审核同意'
            })
            this.init()
            return
          }
          this.$Notice.error({
            title: '失败提示',
            desc: res.data.errmsg
          })
        })
      }
    },
    disagree (row, index) { // 星级评定
      if (confirm('确定将不同意将该社区评定为5星吗？')) {
        updateApplyN({ id: row.id }).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({
              title: '成功提示',
              desc: '审核不同意'
            })
            this.init()
            return
          }
          this.$Notice.error({
            title: '失败提示',
            desc: res.data.errmsg
          })
        })
      }
    },
    changeYear () {
      console.log(this.param.year1)
      // this.param.year = year2str(this.param.year1).toString()
      // console.log(this.param.year, '$$$$')
      // console.log(new Date(this.param.year, 4, 14), new Date(2021, 4, 14))
      // this.star_year = new Date(this.param.year, 4, 14)
    },
    setTime () { // 设置每年评定时间段
      let param = {
        year: year2str(this.param.year),
        begin_time: date2str(this.param.begin_time),
        end_time: date2str(this.param.end_time)
      }
      insertStarYear(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({
            title: '成功提示',
            desc: '您已设置成功'
          })
          this.getTime()
          return
        }
        this.$Notice.error({
          title: '失败提示',
          desc: res.data.errmsg
        })
      })
    },
    getTime () {
      getStarInfo({}).then(res => {
        if (res.data.errcode === 0) {
          console.log(res, '$%%%%%%%s')
          this.param.year = res.data.data.year
          this.param.begin_time = res.data.data.begin_time
          this.param.end_time = res.data.data.end_time
          return
        }
        this.$Notice.error({
          title: '失败提示',
          desc: res.data.errmsg
        })
      })
    }
  }
}
</script>
